<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-back-button default-href="/activity"></ion-back-button>
        </ion-buttons>
        <ion-title>活跃度规则</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true" class="ion-padding">
      <!-- 规则说明标题 -->
      <div class="rules-header">
        <ion-icon :icon="informationCircleOutline" size="large" color="primary"></ion-icon>
        <h1>活跃度获取规则</h1>
        <p>通过以下方式可以获得活跃度积分，提升您在排行榜中的排名</p>
      </div>

      <!-- 日常任务规则 -->
      <ion-card class="rule-card">
        <ion-card-header>
          <ion-card-title>
            <ion-icon :icon="calendarOutline" color="primary"></ion-icon>
            日常任务
          </ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <div class="rule-list">
            <div class="rule-item">
              <div class="rule-icon">
                <ion-icon :icon="checkmarkCircleOutline" color="success"></ion-icon>
              </div>
              <div class="rule-content">
                <h3>每日签到</h3>
                <p>每天首次签到可获得 <strong>+10分</strong></p>
                <span class="rule-note">连续签到7天额外奖励20分</span>
              </div>
            </div>
            
            <div class="rule-item">
              <div class="rule-icon">
                <ion-icon :icon="eyeOutline" color="tertiary"></ion-icon>
              </div>
              <div class="rule-content">
                <h3>浏览房源</h3>
                <p>每浏览10个房源可获得 <strong>+5分</strong></p>
                <span class="rule-note">每日最多获得15分</span>
              </div>
            </div>
          </div>
        </ion-card-content>
      </ion-card>

      <!-- 房源管理规则 -->
      <ion-card class="rule-card">
        <ion-card-header>
          <ion-card-title>
            <ion-icon :icon="homeOutline" color="warning"></ion-icon>
            房源管理
          </ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <div class="rule-list">
            <div class="rule-item">
              <div class="rule-icon">
                <ion-icon :icon="addCircleOutline" color="success"></ion-icon>
              </div>
              <div class="rule-content">
                <h3>发布房源</h3>
                <p>成功发布一个房源可获得 <strong>+20分</strong></p>
                <span class="rule-note">房源信息完整度影响积分</span>
              </div>
            </div>
            
            <div class="rule-item">
              <div class="rule-icon">
                <ion-icon :icon="refreshOutline" color="primary"></ion-icon>
              </div>
              <div class="rule-content">
                <h3>更新房源</h3>
                <p>更新房源信息可获得 <strong>+5分</strong></p>
                <span class="rule-note">每个房源每天最多获得5分</span>
              </div>
            </div>
          </div>
        </ion-card-content>
      </ion-card>

      <!-- 交易相关规则 -->
      <ion-card class="rule-card">
        <ion-card-header>
          <ion-card-title>
            <ion-icon :icon="contractOutline" color="success"></ion-icon>
            交易相关
          </ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <div class="rule-list">
            <div class="rule-item">
              <div class="rule-icon">
                <ion-icon :icon="documentOutline" color="success"></ion-icon>
              </div>
              <div class="rule-content">
                <h3>成功租赁</h3>
                <p>完成一笔租赁交易可获得 <strong>+50分</strong></p>
                <span class="rule-note">房东和租客都可获得积分</span>
              </div>
            </div>
            
            <div class="rule-item">
              <div class="rule-icon">
                <ion-icon :icon="starOutline" color="warning"></ion-icon>
              </div>
              <div class="rule-content">
                <h3>获得好评</h3>
                <p>收到一个5星好评可获得 <strong>+15分</strong></p>
                <span class="rule-note">4星好评获得10分，3星及以下不获得积分</span>
              </div>
            </div>
          </div>
        </ion-card-content>
      </ion-card>

      <!-- 社交互动规则 -->
      <ion-card class="rule-card">
        <ion-card-header>
          <ion-card-title>
            <ion-icon :icon="peopleOutline" color="tertiary"></ion-icon>
            社交互动
          </ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <div class="rule-list">
            <div class="rule-item">
              <div class="rule-icon">
                <ion-icon :icon="chatbubbleOutline" color="primary"></ion-icon>
              </div>
              <div class="rule-content">
                <h3>回复咨询</h3>
                <p>及时回复租客咨询可获得 <strong>+3分</strong></p>
                <span class="rule-note">2小时内回复视为及时回复</span>
              </div>
            </div>
            
            <div class="rule-item">
              <div class="rule-icon">
                <ion-icon :icon="shareOutline" color="secondary"></ion-icon>
              </div>
              <div class="rule-content">
                <h3>分享房源</h3>
                <p>分享房源到社交平台可获得 <strong>+2分</strong></p>
                <span class="rule-note">每个房源每天最多获得6分</span>
              </div>
            </div>
          </div>
        </ion-card-content>
      </ion-card>

      <!-- 排行榜说明 -->
      <ion-card class="info-card">
        <ion-card-header>
          <ion-card-title>
            <ion-icon :icon="trophyOutline" color="warning"></ion-icon>
            排行榜说明
          </ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <div class="info-content">
            <p>• 排行榜每日凌晨0点更新</p>
            <p>• 活跃度积分永久累计，不会清零</p>
            <p>• 前三名用户将获得特殊标识</p>
            <p>• 月度排行榜前10名将获得现金奖励</p>
            <p>• 恶意刷分行为将被系统检测并扣除积分</p>
          </div>
        </ion-card-content>
      </ion-card>

      <!-- 联系客服 -->
      <div class="contact-section">
        <ion-button expand="block" fill="outline" @click="contactService">
          <ion-icon :icon="helpCircleOutline" slot="start"></ion-icon>
          有疑问？联系客服
        </ion-button>
      </div>
    </ion-content>
  </ion-page>
</template>

<script setup lang="ts">
import {
  IonPage,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
  IonButtons,
  IonBackButton,
  IonIcon,
  IonCard,
  IonCardHeader,
  IonCardTitle,
  IonCardContent,
  IonButton,
  toastController
} from '@ionic/vue'
import {
  informationCircleOutline,
  calendarOutline,
  checkmarkCircleOutline,
  eyeOutline,
  homeOutline,
  addCircleOutline,
  refreshOutline,
  contractOutline,
  documentOutline,
  starOutline,
  peopleOutline,
  chatbubbleOutline,
  shareOutline,
  trophyOutline,
  helpCircleOutline
} from 'ionicons/icons'

// 联系客服
const contactService = async () => {
  const toast = await toastController.create({
    message: '客服功能开发中，请稍后再试...',
    duration: 2000,
    color: 'primary',
    position: 'top'
  })
  await toast.present()
}
</script>

<style scoped>
.rules-header {
  text-align: center;
  margin-bottom: 24px;
}

.rules-header h1 {
  margin: 16px 0 8px 0;
  color: var(--ion-color-dark);
  font-size: 24px;
  font-weight: bold;
}

.rules-header p {
  margin: 0;
  color: var(--ion-color-medium);
  font-size: 14px;
  line-height: 1.5;
}

.rule-card {
  margin-bottom: 16px;
}

.rule-card ion-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
}

.rule-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rule-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: var(--ion-color-light);
  border-radius: 8px;
}

.rule-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.rule-content {
  flex: 1;
}

.rule-content h3 {
  margin: 0 0 4px 0;
  color: var(--ion-color-dark);
  font-size: 16px;
  font-weight: 600;
}

.rule-content p {
  margin: 0 0 4px 0;
  color: var(--ion-color-dark);
  font-size: 14px;
}

.rule-content strong {
  color: var(--ion-color-primary);
  font-weight: bold;
}

.rule-note {
  font-size: 12px;
  color: var(--ion-color-medium);
  font-style: italic;
}

.info-card {
  margin-bottom: 16px;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
}

.info-card ion-card-title {
  color: white;
}

.info-content p {
  margin: 8px 0;
  font-size: 14px;
  line-height: 1.5;
}

.contact-section {
  margin-top: 24px;
  margin-bottom: 32px;
}
</style>
